<template>
  <div class="app-container calendar-list-container">
    <el-form class="form-container" :model="postForm" :rules="rules" ref="postForm" label-position="left">
      <div class="createPost-main-container">
        <el-form-item label-width="100px" label="选择营业点" prop="unit_id">
          <el-select v-model="postForm.unit_id"  placeholder="选择营业点类型" style="width: 50%;" @change='changeOutlet'>
            <el-option v-for="(item, index) in user_outlet" :key='index' :label="item.hotel_name" :value='item.id'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="100px" label="归属市/区" prop="selectAreaInfo">
          <el-cascader placeholder="归属市/区"  
                       :options="areaData" clearable 
                       v-model="selectAreaInfo" filterable  
                       change-on-select style="width: 50%;" :props="areaProps"
                       @change="setAreas">
          </el-cascader> 
        </el-form-item>
        <!-- // 高德地图 -->
        <div v-if="ismapShow">
          <mapDrag @drag="dragMap" :lat="postForm.lat" :lng="postForm.lng"></mapDrag>
        </div>

        <el-form-item label-width="100px" label="详细地址" prop="address">
            <el-input type="textarea" class="article-textarea" :rows="1" clearable @focus="setAddress"  autosize placeholder=" 输入详细地址" v-model="postForm.address" style="width: 50%;"></el-input>
        </el-form-item>
        <el-row>
        <el-col :span="21">
          <div class="postInfo-container">
                <el-col :span="8">
                  <el-tooltip class="item" effect="dark" content="经度" placement="top">
                    <el-form-item label-width="100px" label="经度/维度:" class="postInfo-container-item">
                      <el-input  style='min-width:60px;' type='text' readonly="readonly" v-model="postForm.lng" placeholder="地图选择地址后将自动填入"></el-input>
                    </el-form-item>
                  </el-tooltip>
                </el-col>
                <el-col :span="7">
                  <el-tooltip class="item" effect="dark" content="维度" placement="top">
                    <el-form-item label-width="50px" class="postInfo-container-item">
                      <el-input  style='min-width:60px;'  type='text' readonly="readonly" v-model="postForm.lat" placeholder="地图选择地址后将自动填入"></el-input>
                    </el-form-item>
                  </el-tooltip>
                </el-col>
            </div>
          </el-col>
        </el-row>
        <el-form-item label-width="100px" label="负责人名称" prop="link_name">
          <el-input type="text" placeholder=" 输入负责人名称" v-model="postForm.link_name" style="width: 50%;"></el-input>
        </el-form-item>
        <el-form-item label-width="100px" label="联系号码" prop="link_phone">
          <el-input type="text" placeholder=" 输入负责人联系号码" v-model="postForm.link_phone" style="width: 50%;"></el-input>
        </el-form-item>
        <el-form-item label-width="120px" label="商品优惠选项 : "></el-form-item>
        <el-form-item label-width="100px" label="买满金额">
           <el-input-number v-model="postForm.threshold" controls-position="right" :min="0" style="width: 50%;"></el-input-number>
        </el-form-item>
        <el-form-item label-width="100px" label="减免金额">
         <el-input-number v-model="postForm.cashback" controls-position="right" :min="0" style="width: 50%;"></el-input-number>
        </el-form-item>
        <el-form-item label-width="100px" label="起送费">
         <el-input-number v-model="postForm.min_amount" controls-position="right" :min="0" style="width: 50%;"></el-input-number>
        </el-form-item>
        <el-form-item label-width="100px" label="配送费">
         <el-input-number v-model="postForm.carry_amount" controls-position="right" :min="0" style="width: 50%;"></el-input-number>
        </el-form-item>
        <el-form-item label-width="100px" label="最低提现额">
         <el-input-number v-model="postForm.min_withdraw" controls-position="right" :min="0" style="width: 50%;"></el-input-number>
        </el-form-item>
        <el-form-item label-width="100px" label="标题/提示">
          <el-input type="textarea" class="article-textarea" :rows="1" autosize placeholder=" 设置营业点的标题或提示" v-model="postForm.caption" style="width: 50%;"></el-input>
        </el-form-item>
        <el-form-item label-width="100px" label="备注">
          <el-input type="textarea"  class="article-textarea" :rows="1" autosize placeholder=" 设置营业点的备注信息" v-model="postForm.remark" style="width: 50%;"></el-input>
        </el-form-item>
        <el-form-item label="营业点-Logo">
          <Upload v-model="postForm" :tmpFile="tmpFile" ref="refupload" imgType='2' :actionUrl="actionUrl"  @input-img="setUrl" @view-img="viewImg"></Upload>  
        </el-form-item>

       <!-- // 提交 -->
        <el-form-item style="margin-bottom: 40px;" label-width="180px" >
          <el-button type="primary"  :loading="loading" @click.stop="submitForm()">立即提交</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>

import Upload from '@/components/Upload/singleImage3'
import { mapGetters } from 'vuex'
import * as api from '@/api/main-api' // API
// 引入高德地图
import mapDrag from '../outlets/mapDrag'

export default {
  name: 'outletConfig',

  components: { Upload, mapDrag },

  data() {
    return {
      postForm: {},
      areaData: [],
      loading: false,
      outletList: [],
      // 字段验证
      rules: {
        unit_id: [
          { required: true, message: '营业点不能为空', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '营业点地址不能为空', trigger: 'blur' },
          { min: 5, message: '长度在不能少于2个字', trigger: 'blur' }
        ],
        link_phone: [
          { required: true, message: '联系人号码不能为空', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号格式错误' }
        ],
        link_name: [
          { required: true, message: '联系人名称不能为空', trigger: 'blur' },
          { min: 2, message: '长度在不能少于2个字', trigger: 'blur' }
        ]
      },
      // 默认字段名称
      areaProps: {
        children: 'children',
        label: 'cname',
        value: 'id'
      },
      // 地图相关
      ismapShow: false,
      // 图片提交地址(暂时没有用,用后台上传)
      actionUrl: process.env.BASE_API + '/admin/v1/imgupload',
      tmpFile: '',
      selectAreaInfo: []
    }
  },

  computed: {
    ...mapGetters([
      'user_outlet'
    ])
  },

  created() {
    // 本地缓存地区列表数据
    var areaList = localStorage.getItem('china_areas_list')
    if (!areaList) {
      this.areaList() // 获取区域
    } else {
      this.areaData = JSON.parse(localStorage.getItem('china_areas_list'))
    }
  },

  // 触动方法
  methods: {
    // 选择框改变值
    changeOutlet(v) {
      this.user_outlet.forEach(item => {
        if (item.id === v) {
          this.setPostFormData(item)
          return false
        }
      })
    },

    // 选中的对应的站点信息
    setPostFormData(item) {
      this.postForm = item
      this.postForm.unit_id = item.id
      this.postForm.thumb = item.unit_thumb
      this.selectAreaInfo = item.area_ids.split(',')
      this.ismapShow = false // 关闭地图弹框
    },

    // 成功 / 过程返回的图片 url
    setUrl(url) {
      if (url === '') { //  rmove
        this.tmpFile = ''
      } else {
        this.postForm.thumb = url
        this.postDataUrl(this.postForm)
      }
    },

    // 表单提交
    submitForm() {
      this.$refs.postForm.validate(valid => {
        if (valid) {
          this.loading = true
          if (this.selectAreaInfo && this.selectAreaInfo.length > 0) {
            this.postForm.area_id = this.selectAreaInfo.join(',')
          } else {
            this.$root.message('归属市/区名称不能为空', 'warning')
            this.loading = false
            return false
          }
          delete this.postForm.unit_thumb
          // 先提交图片在提交商品,没修改不提交
          if (this.tmpFile !== '') {
            this.$refs.refupload.handleSubmit()
          } else { // 没有更改图片即可上传
            this.postDataUrl(this.postForm)
          }
        } else {
          console.log('error submit!!')
          this.loading = false
          return false
        }
      })
    },

    // 营业点数据提交
    postDataUrl(data, row) {
      api.editHotelApi(data).then(response => {
        if (response.data.code === 0) {
          this.$root.message('操作成功', 'success')
          setTimeout(() => {
            this.$router.push({ path: '/outlets/outlet-config' })
          }, 20)
        }
        this.loading = false
      })
    },

    // 将选择的文件放到当前vue中,先显示后一起上传
    viewImg(file) {
      this.tmpFile = file.url // 本地缓存图片
    },

    // 触发地图显示
    setAddress() {
      this.ismapShow = !this.ismapShow
    },

    // 大概范围触发接口获取坐标
    setAreas(v) {
      if (v && v.length > 2) {
        var area_id = v.join(',')
        var getForm = {
          areas_id: area_id
        }
        api.AreaInfoApi(getForm).then(response => {
          if (response.data.code === 0) {
            this.postForm.lat = response.data.data.lat
            this.postForm.lng = response.data.data.lng
          }
        })
      }
    },

    // 高德地图搜索出来的数据
    dragMap(v) {
      if (v.info === 'OK' && v.position !== 'undefined') {
        this.postForm.lat = v.position.lat
        this.postForm.lng = v.position.lng
        if (v.regeocode.aois.length > 0 && v.regeocode.aois[0].name !== 'undefined') {
          this.postForm.address = v.regeocode.aois[0].name
        } else {
          this.postForm.address = v.address
        }
      }
    },

    // 中国地区列表
    areaList() {
      api.areaListApi().then(response => {
        if (response.data.code === 0) {
          this.areaData = response.data.data
          localStorage.setItem('china_areas_list', JSON.stringify(response.data.data))
        }
      })
    }

  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";
  .title-prompt{
    position: absolute;
    right: 0px;
    font-size: 12px;
    top:10px;
    color:#ff4949;
  }
  .createPost-container {
    position: relative;
    .createPost-main-container {
      padding: 40px 45px 20px 12%;
      .postInfo-container {
        position: relative;
        @include clearfix;
        margin-bottom: 10px;
        .postInfo-container-item {
          float: left;
        }
      }
      .editor-container {
        min-height: 500px;
        margin: 0 0 30px;
        .editor-upload-btn-container {
            text-align: right;
            margin-right: 10px;
            .editor-upload-btn {
                display: inline-block;
            }
        }
      }
    }
    .word-counter {
      width: 40px;
      position: absolute;
      right: -10px;
      top: 0px;
    }
  }
</style>
